<template>
  <div class="hello">
    <el-form ref="modelForm" :rule="rules" :model="modelForm" label-position="right" label-width="200px">
      <div v-for="(item, index) in modelForm.topic" :key="index">
        <el-collapse>
          <el-collapse-item :key="index">
            <template v-slot:title="title">
              第{{ index+1 }}个跳转
            </template>
            <!-- 问题 -->
            <el-form-item
                :prop="`topic.${index}.subject`"
                :label="`跳转${index + 1}开始题目`"
                :rules="{ required: true, message: '请选择跳转开始题目', trigger: 'change' }"
            >
              <el-select v-model="item.subject" class="m-2" placeholder="Select" size="large" @change="change(index)">
                <el-option
                    v-for="item in options"
                    :key="item.questionText"
                    :label="item.questionText"
                    :value="item.questionText"
                />
              </el-select>
            </el-form-item>
            <el-form-item
                :prop="`topic.${index}.answer`"
                :label="`跳转${index + 1}开始选项`"
                :rules="{ required: true, message: '请选择跳转开始选项', trigger: 'change' }"
            >
              <el-select  v-model="item.answer" class="m-2" placeholder="Select" size="large" @change="getfrom(index)">
                <el-option
                    v-for="item in options1"
                    :key="item.choiceText"
                    :label="item.choiceText"
                    :value="item.choiceText"
                />
              </el-select>
            </el-form-item>
            <el-form-item
                :prop="`topic.${index}.tosubject`"
                :label="`跳转${index + 1}结束题目`"
                :rules="{ required: true, message: '请选择跳转结束题目', trigger: 'change' }"
            >
              <el-select v-model="item.tosubject" class="m-2" placeholder="Select" size="large" @change="change1(index)">
                <el-option
                    v-for="item in options2"
                    :key="item.questionText+'to'"
                    :label="item.questionText"
                    :value="item.questionText"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="removeQuestion(index)">删除跳转</el-button>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </div>
      <el-form-item>
        <el-button style="margin-top: 10px" @click="goback" type="primary">返回</el-button>
        <el-button style="margin-top: 10px" @click="addQuestion" type="primary">新增跳转</el-button>
        <el-button style="margin-top: 10px" @click="addSubmit()" type="primary">提交</el-button>
        <el-button style="margin-top: 10px" @click="resetForm('modelForm')" type="primary">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import vuedraggable from 'vuedraggable'
import element, {ElMessage} from 'element-plus'
import router from "@/router";
export default {
  name: 'SetToQuestion',
  components: {
    vuedraggable
  },
  data() {
    return {
      options:[],
      ans1:[],
      ans2:[],
      options1:[],
      options2:[],
      options3:[],
      index1:0,
      rules: {},
      modelForm: {
        topic: []
      }
    }
  },
  methods: {
    goback(){
      router.push('/AddQuestionnaire')
    },
    init() {
      let op1=[];
      let op2=[]
      let ans1 = this.$cookies.get('ans1')
      ans1.forEach(function (item){
        console.log(item)
        op2.push(item)
        if(item.questionType != 3){
          op1.push(item)
        }
      })
      console.log(ans1)
      this.options3=op2
      this.ans1=op2
      this.options=op1
      this.ans2 = this.$cookies.get('ans2')
      console.log(this.ans2)
    },
    end(evt) {
      this.$refs.modelForm.clearValidate()
    },
    getfrom(index) {
      let num=0
      let self=this
      this.ans2.forEach(function (item){
        if(self.modelForm.topic[index].answer == item.choiceText && self.modelForm.topic[index].from == item.quesCount){
          self.modelForm.topic[index].choicefrom=num
        }
        num++
      })
    },
    getto(index) {

    },
    change(index) {

      let text = this.modelForm.topic[index].subject
      let count
      let sum=[]
      this.options3.forEach(function (item){
        if (item.questionText == text) {
          count=item.count
        }
        if (item.questionText != text){
          sum.push(item)
        }
      })
      console.log(sum)
      this.options2=sum
      let op1=[]
      console.log(this.ans2)
      this.ans2.forEach(function (it){
        if(it.quesCount == count) {
          op1.push({choiceText:it.choiceText,count:count})
        }
      })
      console.log(op1)
      this.modelForm.topic[index].from=count
      this.options1=op1
    },
    change1(index) {

      let text = this.modelForm.topic[index].tosubject
      let count
      this.options3.forEach(function (item){
        if (item.questionText == text) {
          count=item.count
        }
      })

      this.modelForm.topic[index].to=count
    },
    removeDomain(index, idx) { // 删除选项
      this.modelForm.topic[index].answers.splice(idx, 1)
    },
    removeQuestion(index) {//删除题目
      this.modelForm.topic.splice(index, 1)
    },

    addQuestion() { // 新增题目
      this.index1++
      this.modelForm.topic.push({ subject:'',answer:'',tosubject: '',toanswer: '',from:0,to:0 })

    },
    resetForm(formName) { // 重置
      this.$refs[formName].resetFields()
    },
    addSubmit() {
      let self=this
      console.log(self.ans1)
      this.$refs.modelForm.validate(valid => {
        if (valid) {
          let res1=[]
          let res2=[]
          let res = this.modelForm.topic
          res.forEach(function (item){
            self.ans2[item.choicefrom].toQuestion=item.to
          })
          self.ans2.forEach(function (item){
            res1.push(item)
          })
          self.ans1.forEach(function (item){
            res2.push(item)
          })
          console.log(res1)
          console.log(res2)
          self.$axios.post('http://localhost:8090/questionnaire/insertQuestionnaire',{
            questions : res2,
            end:this.$cookies.get('end'),
            qname:this.$cookies.get('quesName'),
            choices:res1,
            uid:this.$cookies.get('value').uid
          }).then(res=>res.data).then(res=>{
            console.log(this.$cookies.get('quesName'))
            if(res.code == '200') {
              self.$cookies.remove('modelForm')
              ElMessage({
                message: '操作成功！',
                type: 'success',
              })
              router.push('/questionnaire')
            }else {
              ElMessage({
                message: '操作失败！',
                type: 'error',
              })
            }
          })
        }
      })
    }
  },
  beforeMount() {
    this.init()
  }
}
</script>

<style scoped>

</style>
